<template>
<div>
    <div class="title">
        <p class="renyuan">人员管理</p>
        <Modal v-model="modal1" title="新增人员"  :loading="loading" @on-ok="asyncOK" width="570" :styles="{top:'180px'}">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" >
                <Form-item class="sost1" prop="userName">
                    <p class="tit">人员名称：</p>
                    <Input v-model="formValidate.userName"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
                </Form-item>
                <Form-item class="sost1" prop="orgId">
                    <p class="tit">组织机构：</p>
                    <Input v-model="formValidate.orgId"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
                </Form-item>
                <Form-item class="sost1" prop="roleId">
                    <p class="tit">角色：</p>
                    <Select v-model="formValidate.roleId" clearable class="selc" style="width:240px;font-size: 14px" placeholder="未选择">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item class="sost1" prop="email">
                    <p class="tit">邮箱：</p>
                    <Input v-model="formValidate.email"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
                </Form-item>
                <Form-item class="sost1" prop="mobile">
                    <p class="tit">手机号：</p>
                    <Input v-model="formValidate.mobile"  size="large" placeholder="未编辑" style="width:240px;font-size: 14px"></Input>
                </Form-item>
                <Form-item class="sost1" prop="status">
                    <p class="tit">是否有效：</p>
                    <Select v-model="formValidate.status" clearable class="selc" style="width:240px;font-size: 14px" placeholder="未选择">
                        <Option v-for="item in yesList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </Form-item>
            </Form>
            <div slot="footer" style="text-align: center;margin:0px 0px 0px 0px;">
                <Button id="serch1"  @click="handleSubmit_ry('formValidate')" type="primary">保存</Button>
            </div>
        </Modal>
    </div>
    <div style="margin-top: 5px;">
        <p class="jues" style="float:left">角色：</p>
        <Radio-group style="margin-left: 6px;margin-top: 15px;" v-model="model8.radio" type="button">   
            <Radio class="ridou" label="不限">
                <span>不限</span>
            </Radio> 
            <Radio class="ridou" label="1">
                <span>风控专员</span>
            </Radio>
            <Radio class="ridou" label="2">
                <span>风控经理</span>
            </Radio>
            <Radio class="ridou" label="3">
                <span>客户专员</span>
            </Radio>
            <Radio class="ridou" label="4">
                <span>客户经理</span>
            </Radio>
        </Radio-group>
    </div>
    <div class="sosuo6">
         <div class="sost5">
            <p class="tit1">组织机构：</p>
            <Select v-model="model8.serch" clearable class="selc" style="width:280px;font-size: 14px" placeholder="未选择">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
        </div>
        <div class="sost5">
            <p class="tit1">关键信息：</p>
            <Input  size="large" placeholder="未编辑" style="width:280px;font-size: 14px;position: relative;top: 0px;" v-model="model8.text" ><Button slot="append" icon="ios-search" @click="change"></Button></Input>
        </div>
        <Button  @click="handleReset_5" class="congz" type="primary" style="font-size: 14px;">重置</Button>
    </div>
    <div class="tab">
        <Button class="xinz" @click="newadd('formValidate')" type="primary" style="font-size: 18px;">新增</Button>
        <Table stripe  :columns="columns7" :data="list"></Table>
    </div>
    <div class="pag">
        <Page style="float:right;" :total="filter.total" :current="filter.page" :page-size="5" @on-change="changePage_ry"></Page>
    </div>
    
</div>   
</template>
<script>
    import Base from '../common/Base.js'
    export default {
        mixins:[Base],
        data () {
            return {
                modal1: false,
                click:false,
                loading: true,
                model8:{
                    serch:"",
                    text:"",
                    radio:"不限"
                },
                formValidate: {
                    userName: '',
                    mobile:'',
                    roleId: '',
                    orgId: '',
                    email: '',
                    status: '',
                    userPwd:'1',
                    tenantId:'2',
                    createUser:'3',
                    time:'',
                    userId:''
                },
                ruleValidate: {
                    userName: [
                        { required: true, message: '人员名称不能为空', trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true, message: '手机号不能为空', trigger: 'blur' },
                        { type: 'string', min:10, message: '手机号不正确', trigger: 'blur' }
                    ],
                    orgId: [
                        { required: true, message: '组织机构不能为空', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                    ],
                    status: [
                        { required: true, message: '请选是否有效', trigger: 'change' }
                    ],
                    roleId: [
                        { required: true, message: '请选择角色', trigger: 'change' }
                    ]
                },
                cityList: [
                    {
                        value: '风控专员',
                        label: '风控专员'
                    },
                    {
                        value: '风控经理',
                        label: '风控经理'
                    },
                    {
                        value: '客户专员',
                        label: '客户专员'
                    },
                    {
                        value: '客户经理',
                        label: '客户经理'
                    }
                ],
                 yesList: [
                    {
                        value: '1',
                        label: '是'
                    },
                    {
                        value: '0',
                        label: '否'
                    }
                ],
                columns7: [
                    {
                        title: '序号',
                        width: 60,
                        key: 'id'
                    },
                    {
                        title: '人员名称',
                        width: 100,
                        key: 'userName'
                    },
                    {
                        title: '手机号',
                        width: 120,
                        key: 'mobile'
                    },
                    {
                        title: '角色',
                        width: 107,
                        key: 'roleId'
                    },
                    {
                        title: '组织机构',
                        width: 150,
                        key: 'orgId'
                    },
                    {
                        title: '邮箱',
                        width: 170,
                        key: 'email'
                    },
                    {
                        title: '有效',
                        width: 50,
                        key: 'status1'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 180,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/xiugai.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding: '0px 20px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.index)
                                        }
                                    }
                                }, ''),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/shixiao.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding: '0px 20px'
                                    },
                                    on: {
                                        click: () => {
                                            this.lapse_ry(params.index)
                                        }
                                    }
                                }, ''),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        src:''
                                    },
                                    style: {
                                        background:"url('./static/img/shanchu.png') no-repeat center",
                                        fontWeight: '600',
                                        color:'#5b8cff',
                                        fontSize:'14px',
                                        width: '18px',
                                        height: '18px',
                                        padding:' 0px 20px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove_ry(params.index)
                                        }
                                    }
                                }, '')
                            ]);
                        }
                    }
                ]
            }
        },
        methods: {
            asyncOK () {
                setTimeout(() => {
                    this.modal1 = false;
                }, 1000);
            },
            changePage_ry(page) {
                var _this = this;
                _this.filter.page = page;
                _this.getData_ry();
            },
            change(){
                console.log(this.model8)
            },
            onclick(){
                alert(params.index)
            },
            handleReset_5() {
                this. model8={
                    serch:"",
                    text:"",
                    radio:"不限"
                };
            },
            newadd(name){
                this.modal1 = true;
                this.$refs[name].resetFields();
                Object.assign(this.$data.formValidate, this.$options.data().formValidate);
            },
            lapse_ry(index) {
                var _this = this;
                var dataObj = Object.assign({}, _this.list[index]);
                dataObj.status="0";
                this.$Modal.confirm({
                    title: '失效操作',
                    content: '<p>确认失效？</p>',
                    onOk: () => {
                        let deleteUrl = `${_this.dmoreurl}/saOrgUser/saOrgUserUpdate`;
                        _this.$http.post(deleteUrl,dataObj)
                            .then(response => {
                                _this.getData_ry()
                                this.$Message.info('该数据已失效');
                            })
                    },
                    onCancel: () => {
                        this.$Message.info('取消数据失效');
                    }
                });
                    
            },
            remove_ry(index) {
                var _this = this;
                this.$Modal.confirm({
                    title: '确认删除数据',
                    content: '<p>确认删除数据</p>',
                    onOk: () => {
                        let deleteUrl = `${_this.dmoreurl}/saOrgUser/saOrgUserDel`;
                        _this.$http.post(deleteUrl,{userId:_this.list[index].userId})
                            .then(response => {
                                _this.getData_ry()
                                this.$Message.info('成功删除数据');
                            })
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除数据');
                    }
                });

            },
            handleSubmit_ry(name) {
             let time=new Date().getTime();
             this.formValidate.time=time; 
             var _this = this;
             var submitUrl, submitMethods;
            if (_this.formValidate.userId != '') {
                 submitUrl = `${_this.dmoreurl}/saOrgUser/saOrgUserUpdate`;
                 submitMethods = 'POST';
             } else {
                 submitUrl = `${_this.dmoreurl}/saOrgUser/saOrgUserAdd`;
                 submitMethods = 'POST'
             }
             _this.$refs[name].validate((valid) => {
                if (valid) {
                    _this.$http({
                            url: submitUrl,
                            method: submitMethods,
                            data:_this.formValidate
                        })
                        .then(function(response) {
                            if(response.data){
                                console.log(response)
                            _this.$Message.success('提交成功!');
                            _this.modal1 = false;
                            _this.getData_ry();
                            Object.assign(_this.$data.formValidate, _this.$options.data().formValidate);
                            }else{
                                _this.$Message.success('用户名重复！    请修改！');
                            }  
                        }).catch((error) => {
                            if (error) {
                                this.$Message.info(error.response.msg)
                            }
                        });
                } else {
                    this.$Message.error('表单验证失败!');
                }
                })
            },
            getData_ry() {//分页查询暂定
                var _this = this;
                _this.filter.tenantId='2';
                _this.$http.post(`${_this.dmoreurl}/saOrgUser/saOrgUserQuery`,_this.filter)
                //_this.$http.post(`http://localhost:3000/${_this.module}/list`,_this.filter)
                    .then(function(response) {
                        console.log(response)
                        _this.list = response.data.data;
                        //_this.filter.total = response.data.total;
                        let length_yr=_this.list.length;
                        for( let i=0;i<length_yr;i++){
                            _this.list[i]['id']=i+1;
                            _this.list[i]['roleId']= _this.list[i].roleList[0].roleId;
                            if(_this.list[i]['status']=='1'){
                                _this.list[i]['status1']='是';
                            }else{
                                _this.list[i]['status1']='否';
                            }
                        }
                    })
            }
        },
        watch:{

        },
        created() {
            this.getData_ry();
        },
        mounted() {
            
        }
    }
</script>
<style lang="scss" >
    
</style>